<script setup lang="ts">

import {onMounted, ref, watch} from "vue";
import {NAMESPACE_USER} from "../../interface/user.ts";
import {updateUser} from "../../api/user.ts";
import {messageTip, MessageTipType} from "../../util/common.ts";
import _ from "lodash"

const dialogFormVisible = ref<boolean>()
const currentUser = ref<NAMESPACE_USER.UserItem>({})
const operateResult = ref<boolean>(false)
const formLabelWidth = '140px'

const props = defineProps<{
  dialogFormVisible:boolean
  currentUser:NAMESPACE_USER.UserItem
}>()

onMounted(()=>{
  currentUser.value = _.cloneDeep(props.currentUser)
  dialogFormVisible.value = props.dialogFormVisible
})

const handleSaveUser = () => {
  updateUser(currentUser.value).then(
      data => {
        if (data.data) {
          messageTip("修改成功",MessageTipType.SUCCESS)
          dialogFormVisible.value = false
          operateResult.value = true
        }else {
          messageTip(data.data.message,MessageTipType.ERROR)
        }
      }
  )
}

const emit = defineEmits(['closeDialog'])

watch(() => dialogFormVisible.value,(value)=>{
  if (!value){
    emit('closeDialog',operateResult.value)
  }
})
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="修改用户" width="30%" center >
    <el-form :model="currentUser">
      <input hidden="hidden" v-model="currentUser.id"/>
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input v-model="currentUser.username" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input type="password" v-model="currentUser.password" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="currentUser.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="手机号" :label-width="formLabelWidth">
        <el-input v-model="currentUser.mobile" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="身份证" :label-width="formLabelWidth">
        <el-input v-model="currentUser.idCard" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth">
        <el-input v-model="currentUser.email" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-select v-model="currentUser.state" placeholder="Please select a state">
          <el-option label="初始状态" :value="0"/>
          <el-option label="正常状态" :value="1"/>
          <el-option label="锁定状态" :value="-1"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveUser">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>